<template>
  <div class="goods-copy">
    <el-card class="list-form">
      <div slot="header" class="clearfix">
        <span>铺货设置</span>
      </div>
      <el-form :model="form" label-position="left" label-width="110px" :rules="rules">
        <el-row>
          <el-col :span="8">
            <el-form-item label="商品上架：">
              <el-radio-group v-model="form.is_shelves">
                <el-radio :label="true">立即上架</el-radio>
                <el-radio :label="false">不立即上架</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="发货模式：">
              <el-select v-model="form.delivery_mode">
                <el-option label="跟随上家" :value="0" />
                <el-option label="现货商品" :value="1" />
                <el-option label="预售商品" :value="2" />
              </el-select>
            </el-form-item>
            <el-form-item label="是否限购：">
              <el-select v-model="form.is_limited">
                <el-option label="否" :value="0" />
                <el-option label="是" :value="1" />
              </el-select>
            </el-form-item>
            <el-form-item label="扣减库存类型：">
              <el-select v-model="form.less_stock_type">
                <el-option label="拍下减库存" :value="0" />
                <el-option label="付款减库存" :value="1" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="统一价设置：">
              <el-row>
                <el-select v-model="form.price_type" style="">
                  <el-option label="劵前价" :value="0" />
                  <el-option label="劵后价" :value="1" />
                </el-select>
                <el-select
                  v-model="form.price_option"
                  class="margin-left"
                  style=""
                >
                  <el-option label="使用来源价格" :value="0" />
                  <el-option label="使用倍数价格" :value="1" />
                  <el-option label="自定义价格" :value="2" />
                </el-select>
                <template v-if="form.price_option === 2">
                  <el-input
                    v-model="form.custom_price"
                    class="margin-left"
                    style="width: 80px"
                    min="0"
                  />
                  <span class="margin-left">元</span>
                </template>
              </el-row>
            </el-form-item>
            <el-form-item v-if="form.price_option === 1" label="">
              <span class="margin-left">原价× </span>
              <el-input
                v-model="form.price_multiple"
                class="margin-left"
                style="width: 60px"
                min="0"
              />
              <span class="margin-left">倍</span>
              <span class="margin-left">+</span>
              <el-input
                v-model="form.price_add"
                class="margin-left"
                style="width: 60px"
                min="0"
              />
              <span class="margin-left">元</span>
              <span class="margin-left">保留小数点</span>
              <el-input
                v-model="form.decimal_handle"
                class="margin-left"
                style="width: 60px"
                min="0"
              >
                <template slot="append">位</template>
              </el-input>
            </el-form-item>
            <el-form-item label="库存设置:">
              <el-radio-group v-model="form.stock_type">
                <el-radio :label="0">使用来源商品库存</el-radio>
                <el-radio :label="1">自定义库存</el-radio>
              </el-radio-group>
              <template v-if="form.stock_type === 1">
                <el-input
                  v-model="form.custom_price"
                  class="margin-left"
                  style="width: 80px"
                  min="0"
                />
                <span class="margin-left">件</span>
              </template>
            </el-form-item>
            <el-form-item label="当库存低于：">
              <el-input
                v-model="form.stock_clear"
                class="margin-left"
                style="width: 80px"
                min="0"
              />
              <span class="margin-left">时，清空库存</span>
            </el-form-item>
            <el-form-item label="运费设置:">
              <el-radio-group v-model="form.is_custom_freight">
                <el-radio :label="false">使用来源运费</el-radio>
                <el-radio :label="true">自定义运费</el-radio>
              </el-radio-group>
              <template v-if="form.is_custom_freight">
                <el-input
                  v-model="form.custom_freight"
                  class="margin-left"
                  style="width: 80px"
                  min="0"
                />
                <span class="margin-left">元</span>
              </template>
              <el-tooltip
                class="margin-left"
                effect="dark"
                content="使用来源运费是取商品运费均价，需注意商品运费导致铺货价格变高"
                placement="top-start"
              ><i class="el-icon-question" />
              </el-tooltip>
            </el-form-item>
            <el-button
              type="primary"
              @click="tmplShow = true"
            >上货前确认：价格、库存、属性、敏感词等更更多铺货设置
            </el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <div class="list-table" />
    <el-dialog
      title="铺货设置"
      :visible.sync="tmplShow"
      width="1200px"
      custom-class="copy-tmpl"
    >
      <tmpl-vue />
      <div slot="footer" class="copy-footer">
        asdfadf
      </div>
    </el-dialog>
  </div>
</template>

<script>

import { getShopConfigList, setShopConfig } from '@/api/copy'
import { mapGetters } from 'vuex'
import isEmpty from 'lodash/isEmpty'
import TmplVue from './components/tmpl.vue'

export default {
  components: {
    TmplVue
  },
  computed: {
    ...mapGetters([
      'shopInfo'
    ])
  },
  data() {
    return {
      tmplShow: true,
      form: {
        is_shelves: true,
        delivery_mode: 0,
        is_limited: 0,
        less_stock_type: 0,
        price_type: 0,
        price_option: 0,
        price_multiple: 1,
        price_add: 0,
        decimal_handle: 0,
        custom_price: 0,
        stock_type: 0,
        stock_clear: 0,
        is_custom_freight: false,
        custom_freight: 0
      },
      rules: {

      }
    }
  },
  beforeMount() {
    // this.getShopConfigList()
  },
  methods: {
    getShopConfigList() {
      getShopConfigList({ shop_code: this.shopInfo.shopCode })
        .then(async res => {
          if (isEmpty(res.data)) {
            await this.setShopConfig({ type: 1 })
            return this.getShopConfigList()
          }
          console.log(res)
        })
    },
    setShopConfig(data) {
      return setShopConfig(data || {})
        .then(res => {
          console.log(res)
        })
    }
  }
}
</script>

<style lang="scss">
.copy-tmpl {
  position: relative;
  .el-dialog__header {
    border-bottom: 1px solid rgba(0,0,0,0.06);
  }
  .el-dialog__body {
    height: 65vh;
    padding: 0;
  }
}
</style>

<style lang="scss" scoped>
.goods-copy {
  padding: 12px 20px 0;
  .list-form,
  .list-table {
    padding: 20px;
    border-radius: 4px;
    .el-select {
      width: 140px;
    }
    .margin-left {
      margin-left: 8px;
    }
  }
  .tmpl {
    ::v-deep .el-dialog__header {
      border-bottom: 1px solid rgba(0,0,0,0.06);
    }
    &-footer {

    }
  }
}
</style>
